UEditor之实现配置简单的图片上传示例 | 您所在的位置:网站首页 › ueditor 上传配置 › UEditor之实现配置简单的图片上传示例 |
UEditor之实现配置简单的图片上传示例。 提出问题 Ueditor简单介绍和实现图片上传功能???? 读书感悟 前提: 假如你已经安装tomcat服务器; 假如你已经把项目运行到Eclipse上; 假如你已经有java基础; 假如你对js有一定基础; 假如你已经下载ueditor1_4_3_3-src源码,记得是开发的哦; 那么开始吧! 1.首先你可以到官网Ueditor,查看很详细的文档,包括如何安装到Eclipse,相关jar包和如何使用Ueditor,本文主要介绍如何实现单图片上传和利用自己的接口: 运行tomcat上,在google浏览器运行(Test是我的项目名称): http://localhost:8081/Test/jsp/config.json 出现一串长长的json的字符串,说明运行成功。 ![]() 2.把WEB-INF/jsp/src下的java源码copy到项目源码中,方便之后的调试代码,如上图 3.运行http://localhost:8081/Test/_examples/simpleDemo.html,可以打开看下这个文件: UEditor简单功能 上面例子很简单,就是如何初始化一个富文本框,已经如何配置工具条等等 4.因为我们要实现图片上传功能,所有要把图片上传按钮搞上去,方法如下: 1)第一种方法:把simpleupload加到toolbars中: toolbars:[['FullScreen',simpleupload ,'Source', 'Undo', 'Redo','Bold','test']] 2)第二种方法:直接把toolbars注释掉 这时就会读取默认的配置文件ueditor.config.js,下面介绍,不过会把所有的按钮全部显示出来 重新运行http://localhost:8081/Test/_examples/simpleDemo.html 如图: ![]() 5.可是你会发现,点击图片上传按钮,一点反应都没有,尼玛有木有! 这里开始介绍ueditor.config.js文件, 首先,你会发现在这个文件可以配置很多,具体看下面即可 重点讲:serverUrl: URL + “php/controller.php”,没错,你没有看错,这个就是请求后端的统一接口路径,记得是统一接口路径,也就是说只有这个路径,没有第二个,会不会觉得很坑呢? 我们把路径改成jsp的:, serverUrl: URL + “jsp/controller.jsp” 我们把注释去掉,重新启动tomcat,刷新页面,点击图片上传按钮, window.UEDITOR_CONFIG = { //为编辑器实例添加一个路径,这个不能被注释 UEDITOR_HOME_URL: URL // 服务器统一请求接口路径 , serverUrl: URL + "php/controller.php" //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的重新定义 , toolbars: [[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'directionalityltr', 'directionalityrtl', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|', 'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|', 'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|', 'print', 'preview', 'searchreplace', 'drafts', 'help' ]] //当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置,否则以配置值为准 //,labelMap:{ // 'anchor':'', 'undo':'' //} //语言配置项,默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换,当然,前提条件是lang文件夹下存在对应的语言文件: //lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase() //,lang:"zh-cn" //,langPath:URL +"lang/" //主题配置项,默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换,当然,前提条件是themes文件夹下存在对应的主题文件: //现有如下皮肤:default //,theme:'default' //,themePath:URL +"themes/" //,zIndex : 900 //编辑器层级的基数,默认是900 //针对getAllHtml方法,会在对应的head标签中增加该编码设置。 //,charset:"utf-8" //若实例化编辑器的页面手动修改的domain,此处需要设置为true //,customDomain:false //常用配置项目 //,isShow : true //默认显示编辑器 //,textarea:'editorValue' // 提交表单时,服务器获取编辑器提交内容的所用的参数,多实例时可以给容器name属性,会将name给定的值最为每个实例的键值,不用每次实例化的时候都设置这个值 //,initialContent:'欢迎使用ueditor!' //初始化编辑器的内容,也可以通过textarea/script给值,看官网例子 ![]() 6.你会发现,你选择一张图片,我卡,图片上传不了 打开google浏览器调试,如下图: ![]() 7.说明还有些配置文件还没配好,我们看刚刚配置的后端请求路径 // 服务器统一请求接口路径 , serverUrl: URL + "jsp/controller.jsp" 记住,大家要把这个文件当作后端的java文件,一定要记住,很重要的。 controller.jsp会返回同目录下的config.json文件,大家要把它当作是后端返回的数据即可 这时,我们先看config.json文件: 只看部分配置,下面的配置都很重要,但我们先解决上面出现的问题: 上面的问题应该是图片的路径不对造成的,所有我没修改配置:imageUrlPrefix,把他改成,重启,刷新: "imageUrlPrefix" = http://localhost:8081/Test/ /* 前后端通信相关的配置,注释只允许使用多行方式 */ { /* 上传图片配置项 */ "imageActionName": "uploadimage", /* 执行上传图片的action名称 */ "imageFieldName": "upfile", /* 提交的图片表单名称 */ "imageMaxSize": 2048000, /* 上传大小限制,单位B */ "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */ "imageCompressEnable": true, /* 是否压缩图片,默认是true */ "imageCompressBorder": 1600, /* 图片压缩最长边限制 */ "imageInsertAlign": "none", /* 插入的图片浮动方式 */ "imageUrlPrefix": "http://localhost:8081/Test/", /* 图片访问路径前缀 */ "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */ /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */ /* {time} 会替换成时间戳 */ /* {yyyy} 会替换成四位年份 */ /* {yy} 会替换成两位年份 */ /* {mm} 会替换成两位月份 */ /* {dd} 会替换成两位日期 */ /* {hh} 会替换成两位小时 */ /* {ii} 会替换成两位分钟 */ /* {ss} 会替换成两位秒 */ /* 非法字符 \ : * ? " < > | */ /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */ 图片如下: ![]() |
CopyRight 2018-2019 实验室设备网 版权所有 |